<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularUI</title>
    <link rel="stylesheet" href="../../lib/bootstrap3/css/bootstrap.min.css">
</head>
<body style="padding: 10px;">
    <h2>1. 状态改变事件</h2>
    <div class="list-group">
        <a href="#" class="list-group-item">
            <h4 class="list-group-item-heading">$stateChangeStart</h4>
            <p class="list-group-item-text">从一个状态开始过渡到另一个状态时触发这个事件</p>
        </a>
        <a href="#" class="list-group-item">
            <h4 class="list-group-item-heading">$stateChangeSuccess</h4>
            <p class="list-group-item-text">从一个状态过渡到下一个状态完成时触发这个事件</p>
        </a>
        <a href="#" class="list-group-item">
            <h4 class="list-group-item-heading">$stateChangeError</h4>
            <p class="list-group-item-text">当过渡期间发生错误时触发这个事件。通常，模板不能被解析或者解析promise失败时会引发错误。</p>
        </a>
        <p>
            $scope.$on('$stateChangeStart',<br/>
            function(evt, toState, roParams, fromState, fromParams) {<br/>
            // 可以阻止这一状态完成<br/>
            evt.preventDefault();<br/>
            });<br/>
        </p>
    </div>
    <h2>2. 视图加载事件</h2>
    <div class="list-group">
        <a href="#" class="list-group-item">
            <h4 class="list-group-item-heading">$viewContentLoading</h4>
            <p class="list-group-item-text">视图开始加载时， DOM被渲染之前，触发这个事件。</p>
        </a>
        <a href="#" class="list-group-item">
            <h4 class="list-group-item-heading">$viewContentLoaded</h4>
            <p class="list-group-item-text">在视图加载完成以及DOM渲染之后触发这个事件</p>
        </a>
        <p>
            $scope.$on('$viewContentLoading',<br/>
            function(event, viewConfig) {<br/>
            // 在这里可以访问所有视图配置属性<br/>
            // 以及一个特殊的“ targetView”属性<br/>
            // viewConfig.targetView<br/>
            });<br/>
        </p>
    </div>
    <h2>3. 路由参数：$stateParams</h2>
    <div class="well">
        例如，如果在inbox状态中有个看起来像这样的URL：<br/>
        url: 'inbox/:inboxId/messages/{sorted}}?from&to'<br/>
        然后用户到达这个路由：<br/>
        /inbox/123/messages/ascending?from=10&to=20<br/>
        那么$stateParams对象的结果就是：<br/>
        {inboxId: '123', sorted: 'ascending', from: 10, to: 20}<br/>
    </div>
    <h2>4. $urlRouterProvider(25.3.4)</h2>
</body>
</html>